import React from 'react';
import * as mobx from 'mobx';
import {observer, inject} from 'mobx-react';
import {withRouter} from 'react-router-dom';
import {Grid, Icon, Flex, PhotoSwipe} from 'weaver-mobile';
import {Upload, RouteLayout} from 'weaver-mobile-page';
import * as SignUtil from '../../../util/SignUtil';
import * as VariableKeys from '../../../constants/variableKey';
import * as AdapterConstant from "../../../constants/adapter";
import {getLabel} from '../../../util/common';
import * as EmSDK from './../../../util/emSDK'
import jQuery from 'jquery';
import { _ } from './../../../util/pcPublic';

/**
 * 全文批注
 */
@inject('wfSignInputStore')
@withRouter
@observer
export default class Main extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {wfSignInputStore} = this.props;
        const {isForwad,Adapter} = wfSignInputStore;
        const key = isForwad ? VariableKeys.FORWARD_SIGN_FULL_TEXT_ANNOTATION : VariableKeys.SIGN_FULL_TEXT_ANNOTATION;
        const datas = SignUtil.getVariableMapVal(key, []);
        if(Adapter.judgeApiSupport(AdapterConstant.API_EDIT_IMAGE)) {
            datas.push({'fileid': 'add'});
        }
        const remainder = datas.length % 3;
        if (remainder > 0) {
            let i = 0;
            while (i < (3 - remainder)) {
                datas.push({'fileid': 'nullItem'});
                ++i;
            }
        }
        const flexDatas = this.group(datas, 3);
        return (
            <div className={'wf-sign-form-annotation-list'}>
                {flexDatas && flexDatas.map((rowItem, rowIndex) => {
                    return (
                        <Flex key={`row_${rowIndex}`} className={'wf-sign-annotation-row'}>
                            {rowItem && rowItem.map((colItem = {}, colIndex) => {
                                const {datasrc, fileid} = colItem;
                                return (
                                    <Flex.Item key={`col_${colIndex}`} className={fileid == 'nullItem' ? '' : 'wf-sign-annotation-col'}>
                                        {fileid > 0 &&
                                            <div className={`wf-sign-annotation-item wf-sign-annotation-item-img`}>
                                                <img className={"fulltextannotationImg"} data-imgsrc={datasrc} src={datasrc} onClick={e => this.preViewImg(e)}/> 
                                                <div className={`wf-sign-annotation-item-img-del`}>
                                                    <Icon type={'cross-circle-o'} onClick={()=>this.deleteItem(fileid)}/>
                                                </div>
                                            </div>
                                        }
                                        {fileid == 'add' &&
                                            <div className={`wf-sign-annotation-item wf-sign-annotation-item-btn`}>
                                                <Icon type={'plus'} onClick={this.doAdd.bind(this)}/>
                                            </div>
                                        }
                                    </Flex.Item>
                                )
                            })}
                        </Flex>
                    )
                })}
                {this.getBottomBtn()}
            </div>
        )
    }
    preViewImg = (e) => {
        const current = e.target.dataset.imgsrc;
        const urls = this.getFormAllImages(e);
        if(EmSDK.judgeApiSupport("previewImage")){
            EmSDK.preViewImage({urls, current});
        }else{
            const curindex = _.indexOf(urls, current)
            const imageArr = urls.map(url => {
                return {url: url}
            });
            PhotoSwipe.showImage(imageArr, curindex);
        }
    } 


    getFormAllImages = (e) => {
        let urls = [];
        jQuery(".fulltextannotationImg").each(function(){
            const vthis = jQuery(this);
            if(vthis.is("img")){
                urls.push(vthis.attr("src"));		//图片元素
            }else{
                if(!!vthis.attr("data-imgsrc")){
                    let fileimgsrc = vthis.attr("data-imgsrc");
                    urls.push(fileimgsrc);	//附件上传中图片
                }
            }
        });
        return urls;
    }
    doAdd(){
        const {history,wfSignInputStore} = this.props;
        history.go(-1);
        const {hiddenSignInput,Adapter} = wfSignInputStore;
        setTimeout(()=>{
            Adapter.editImage();
        },100);
    }

    getBottomBtn() {
        const {history} = this.props;
        const btns = [{
            key: "confirm",
            text: getLabel(826,"确定"),
            type: "primary",
            onClick: () => {
                history.go(-1);
            }
        }];
        return <RouteLayout.ButtonGroup data={btns}/>;
    }

    group(array, subGroupLength) {
        var index = 0;
        var newArray = [];
        while (index < array.length) {
            newArray.push(array.slice(index, index += subGroupLength));
        }
        return newArray;
    }

    deleteItem(fileid) {
        const {wfSignInputStore} = this.props;
        const {isForwad, controlVariableMap} = wfSignInputStore;
        const key = isForwad ? VariableKeys.FORWARD_SIGN_FULL_TEXT_ANNOTATION : VariableKeys.SIGN_FULL_TEXT_ANNOTATION;
        const datas = SignUtil.getVariableMapVal(key, []);
        let __datas = datas.filter((item) => item.fileid !== fileid);
        controlVariableMap(key, __datas);
    }

}